<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>

<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="稳住" @click="stop">

    <h2>{{msg}}</h2>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪``····',
            interval: null
        },
        methods:{/*
            lang: function(){
                var start, end;
                var _this = this;
                setInterval(function(){
                    start = _this.msg.substring(0,1);
                    end = _this.msg.substring(1);
                    _this.msg = end + start;
                },300);
            },
            wen: function(){

            }*/
            lang() {
                var start, end;
                if(this.interval !== null)
                    return;
                this.interval = setInterval(() => {
                    start = this.msg.substring(0,1);
                    end = this.msg.substring(1);
                    this.msg = end + start;
                }, 300)
            },
            stop(){
                clearInterval(this.interval);
                this.interval = null;
            }
        }
    })
</script>
</html>